// 用户中心页面交互脚本

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 初始化模态框相关元素
    const userModal = document.getElementById('user-modal');
    const userModalContent = document.getElementById('user-modal-content');
    const userModalOverlay = document.getElementById('user-modal-overlay');
    const userModalTitle = document.getElementById('user-modal-title');
    const closeUserModalBtn = document.getElementById('close-user-modal');
    const cancelUserModalBtn = document.getElementById('cancel-user-modal');
    const userForm = document.getElementById('user-form');
    const userActionInput = document.getElementById('user-action');
    const userModalUsernameInput = document.getElementById('user-modal-username');
    const newUsernameInput = document.getElementById('new-username');
    const newPasswordInput = document.getElementById('new-password');
    const toggleNewPasswordBtn = document.getElementById('toggle-new-password');
    const passwordField = document.getElementById('password-field');
    const userRoleSelect = document.getElementById('user-role');
    
    // 获取按钮元素
    const addUserButton = document.getElementById('add-user-button');
    const editUserButtons = document.querySelectorAll('.edit-user-button');
    const deleteUserButtons = document.querySelectorAll('.delete-user-button');
    const logoutButton = document.getElementById('logout-button');
    
    // 添加密码可见性切换功能
    if (toggleNewPasswordBtn) {
        toggleNewPasswordBtn.addEventListener('click', function() {
            const icon = toggleNewPasswordBtn.querySelector('i');
            const type = newPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            newPasswordInput.setAttribute('type', type);
            
            // 切换图标
            if (type === 'password') {
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    }
    
    // 表单提交时确保密码字段是密码类型
    userForm.addEventListener('submit', function() {
        if (newPasswordInput) {
            newPasswordInput.setAttribute('type', 'password');
            const icon = toggleNewPasswordBtn.querySelector('i');
            if (icon) {
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        }
    });
    
    // 添加用户按钮点击事件
    if (addUserButton) {
        addUserButton.addEventListener('click', function() {
            // 重置表单
            userForm.reset();
            userActionInput.value = 'add';
            userModalUsernameInput.value = '';
            userModalTitle.textContent = '添加用户';
            newUsernameInput.disabled = false;
            passwordField.style.display = 'block';
            newPasswordInput.setAttribute('required', 'required');
            
            // 显示模态框
            openModal();
        });
    }
    
    // 编辑用户按钮点击事件
    editUserButtons.forEach(button => {
        button.addEventListener('click', function() {
            const username = this.getAttribute('data-username');
            
            // 设置表单
            userActionInput.value = 'edit';
            userModalUsernameInput.value = username;
            newUsernameInput.value = username;
            newUsernameInput.disabled = true;
            userModalTitle.textContent = '编辑用户';
            
            // 管理员可以修改其他用户的密码
            passwordField.style.display = 'block';
            newPasswordInput.removeAttribute('required');
            newPasswordInput.placeholder = '留空则不修改密码';
            
            // 为了演示，这里模拟从服务器获取用户数据
            // 实际应用中应该通过API获取用户的角色信息
            // 这里假设所有非admin用户都是普通用户
            userRoleSelect.value = username === 'admin' ? 'admin' : 'user';
            
            // 显示模态框
            openModal();
        });
    });
    
    // 删除用户按钮点击事件
    deleteUserButtons.forEach(button => {
        button.addEventListener('click', function() {
            const username = this.getAttribute('data-username');
            
            if (confirm(`确定要删除用户 "${username}" 吗？此操作无法撤销。`)) {
                // 发送删除用户请求
                fetch(`/api/users/delete/${username}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    credentials: 'same-origin'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 显示成功消息
                        showMessage('用户删除成功', 'success');
                        // 重新加载页面以更新用户列表
                        setTimeout(() => {
                            location.reload();
                        }, 1500);
                    } else {
                        // 显示错误消息
                        showMessage(data.message || '用户删除失败', 'error');
                    }
                })
                .catch(error => {
                    console.error('删除用户时出错:', error);
                    showMessage('删除用户时发生错误', 'error');
                });
            }
        });
    });
    
    // 退出登录按钮点击事件
    if (logoutButton) {
        logoutButton.addEventListener('click', function() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = '/logout';
            }
        });
    }
    
    // 关闭模态框事件监听
    closeUserModalBtn.addEventListener('click', closeModal);
    cancelUserModalBtn.addEventListener('click', closeModal);
    userModalOverlay.addEventListener('click', closeModal);
    
    // 阻止模态框内容点击事件冒泡到遮罩层
    userModalContent.addEventListener('click', function(e) {
        e.stopPropagation();
    });
    
    // ESC键关闭模态框
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && userModal.classList.contains('open')) {
            closeModal();
        }
    });
    
    // 表单提交事件监听
    userForm.addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
        
        // 编辑模式下不需要密码验证
        if (userActionInput.value === 'add') {
            // 密码强度验证
            const password = newPasswordInput.value;
            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&.])[A-Za-z\d@$!%*?&.]{8,}$/;
            
            if (!passwordRegex.test(password)) {
                showMessage('密码必须至少包含8个字符，并包含大小写字母、数字和特殊字符', 'error');
                return;
            }
        }
        
        // 显示加载状态
        const submitButton = userForm.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 处理中...';
        
        // 根据操作类型发送请求
        const action = userActionInput.value;
        const username = newUsernameInput.value;
        const password = newPasswordInput.value;
        const role = userRoleSelect.value;
        
        let url, data;
        
        if (action === 'add') {
            // 添加用户
            url = '/api/users/create';
            data = { username, password, role };
        } else {
            // 更新用户
            url = `/api/users/update/${username}`;
            data = { role };
            // 如果填写了密码，则更新密码
            if (password) {
                data.password = password;
            }
        }
        
        // 发送请求
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'same-origin',
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            // 恢复按钮状态
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
            
            if (result.success) {
                showMessage(action === 'add' ? '用户添加成功' : '用户更新成功', 'success');
                closeModal();
                
                // 重新加载页面以更新用户列表
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                showMessage(result.message || (action === 'add' ? '用户添加失败' : '用户更新失败'), 'error');
            }
        })
        .catch(error => {
            console.error('处理用户数据时出错:', error);
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
            showMessage('处理用户数据时发生错误', 'error');
        });
    });
    
    // 打开模态框函数
    function openModal() {
        userModal.classList.add('open');
        setTimeout(() => {
            userModal.style.display = 'flex';
        }, 10);
        // 自动聚焦到第一个输入框
        setTimeout(() => {
            newUsernameInput.focus();
        }, 300);
    }
    
    // 关闭模态框函数
    function closeModal() {
        userModal.classList.remove('open');
        setTimeout(() => {
            userModal.style.display = 'none';
        }, 300);
    }
    
    // 显示消息函数
    function showMessage(message, type = 'info') {
        // 检查是否已存在消息元素
        let messageContainer = document.querySelector('.message-container');
        
        if (!messageContainer) {
            // 创建消息容器
            messageContainer = document.createElement('div');
            messageContainer.className = 'message-container fixed top-4 right-4 z-50';
            document.body.appendChild(messageContainer);
        }
        
        // 创建消息元素
        const messageElement = document.createElement('div');
        messageElement.className = `px-4 py-3 rounded-lg shadow-lg mb-2 flex items-center animate-fadeIn transition-all duration-300 ${type === 'error' ? 'bg-red-50 text-red-700 border border-red-200' : type === 'success' ? 'bg-green-50 text-green-700 border border-green-200' : 'bg-blue-50 text-blue-700 border border-blue-200'}`;
        
        // 添加图标
        const iconClass = type === 'error' ? 'fa-times-circle' : type === 'success' ? 'fa-check-circle' : 'fa-info-circle';
        messageElement.innerHTML = `
            <i class="fa ${iconClass} mr-2"></i>
            <span>${message}</span>
            <button class="ml-auto text-gray-500 hover:text-gray-700 focus:outline-none">
                <i class="fa fa-times"></i>
            </button>
        `;
        
        // 添加关闭按钮事件
        const closeButton = messageElement.querySelector('button');
        closeButton.addEventListener('click', function() {
            messageElement.style.opacity = '0';
            setTimeout(() => {
                messageElement.remove();
                if (messageContainer.children.length === 0) {
                    messageContainer.remove();
                }
            }, 300);
        });
        
        // 添加到容器
        messageContainer.appendChild(messageElement);
        
        // 自动关闭消息
        setTimeout(() => {
            messageElement.style.opacity = '0';
            setTimeout(() => {
                messageElement.remove();
                if (messageContainer.children.length === 0) {
                    messageContainer.remove();
                }
            }, 300);
        }, 5000);
    }
    

    
    // 模拟API调用获取用户数据
    // 实际应用中应该通过AJAX从服务器获取数据
    function fetchUserData() {
        // 这里只是一个示例，实际应用中应该通过API获取数据
        return {
            success: true,
            data: {
                username: 'demo_user',
                role: 'user',
                created_at: '2023-01-01 12:00:00',
                last_login: '2023-01-10 15:30:00'
            }
        };
    }
    
    // 初始化页面数据
    function initPageData() {
        const userData = fetchUserData();
        if (userData.success) {
            // 可以在这里更新页面上的用户数据
            console.log('用户数据:', userData.data);
        }
    }
    
    // 初始化头像上传功能
    function initAvatarUpload() {
        // 获取DOM元素
        const changeAvatarBtn = document.getElementById('change-avatar-btn');
        const avatarInput = document.getElementById('avatar-input');
        const userAvatar = document.getElementById('user-avatar');
        
        // 如果元素不存在，可能是用户没有权限或页面结构不同
        if (!changeAvatarBtn || !avatarInput || !userAvatar) {
            return;
        }
        
        // 点击更换头像按钮触发文件选择
        changeAvatarBtn.addEventListener('click', function() {
            avatarInput.click();
        });
        
        // 监听文件选择变化
        avatarInput.addEventListener('change', function(e) {
            if (e.target.files && e.target.files[0]) {
                const file = e.target.files[0];
                
                // 验证文件大小（不超过2MB）
                if (file.size > 2 * 1024 * 1024) {
                    alert('文件大小不能超过2MB');
                    return;
                }
                
                // 上传文件
                uploadAvatar(file);
            }
        });
        
        // 上传头像函数
        function uploadAvatar(file) {
            // 创建FormData对象
            const formData = new FormData();
            formData.append('avatar', file);
            
            // 显示加载状态
            changeAvatarBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
            changeAvatarBtn.disabled = true;
            
            // 发送AJAX请求
            fetch('/api/users/upload-avatar', {
                method: 'POST',
                body: formData,
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                // 恢复按钮状态
                changeAvatarBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" /></svg>';
                changeAvatarBtn.disabled = false;
                
                if (data.success) {
                    // 更新头像显示
                    userAvatar.src = data.avatar;
                    
                    // 显示成功消息
                    showMessage('头像上传成功', 'success');
                } else {
                    // 显示错误消息
                    showMessage(data.message || '头像上传失败', 'error');
                }
            })
            .catch(error => {
                // 恢复按钮状态
                changeAvatarBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" /></svg>';
                changeAvatarBtn.disabled = false;
                
                // 显示错误消息
                showMessage('网络错误，上传失败', 'error');
                console.error('上传头像错误:', error);
            });
        }
    }
    
    // 初始化页面
    initPageData();
    initAvatarUpload();
});